uniapp搜索框防抖、自动获取焦点

2023-04-17 10:53| 来源: 网络整理| 查看: 265

1.搜索框基本UI结构 .search-box { //实现吸顶效果 position: sticky; top: 0; //防止被后面的图片覆盖 z-index: 999; } //input事件处理函数 methods: { input(e) { // e.value 是最新的搜索内容 console.log(e.value) } }

uni-search-bar官方教学：uni-app官网

2.自动获取焦点

目的：实现跳转到本页面后光标立即定位到搜索框中

修改 components -> uni-search-bar -> uni-search-bar.vue 组件，把 data 数据中的 show 和 showSync 的值，从默认的 false 改为 true 即可：

3.防抖处理

问题：因为搜索框input函数只要输入便会记录输入值，但是很多情况下输入过程中的值并不是我们想要的，所以不需要读取

方案：设置延时器，规定时间内连续输入则input函数不会读取

在 data 中定义防抖的延时器 timerId 如下：

data() { return { // 延时器的 timerId timer: null, // 搜索关键词 kw: '' } }

修改 input 事件处理函数如下：

input(e) { // 清除 timer 对应的延时器 clearTimeout(this.timer) // 重新启动一个延时器，并把 timerId 赋值给 this.timer this.timer = setTimeout(() => { // 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值 this.kw = e.value console.log(this.kw) }, 500) }

注意：我们页面中使用了定时器，在离开这个页面的时候一定要记得清除，避免出现bug。

扩展：settimeout和setinterval之间有什么区别？

区别：setTimeout只运行一次，也就是说设定的时间到后就触发运行指定代码，运行完后即结束；而etinterval是一直循环运行下去，即每到设定时间间隔就触发指定代码，要想停止，需要使用clearInterval()函数。

定时器官方介绍：setTimeout(callback, delay, rest) | uni-app官网

扫描二维码关注公众号，回复： 14639998 查看本文章

【本文地址】

公司简介

联系我们